<!-- 151/266/267 -->
<template>
	<div>
    <a-menu v-model:selectedKeys="activeKey" mode="horizontal" @click="id=''">
      <a-menu-item key="Box">
        {{$t('T9_Box')}}
      </a-menu-item>
      <a-menu-item key="Pallet">
        {{$t('T9_pallet')}}
      </a-menu-item>
      <a-menu-item key="ProcessGroup">
        {{$t('T9_processGroup')}}
      </a-menu-item>
    </a-menu>
    <component :is="currentComponent" :id="id" class="mt-1" @handleChangeTab="handleChange"></component>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import tabBox from './components/box.vue'
  import tabPallet from './components/pallet.vue'
  import tabProcessGroup from './components/processGroup.vue'

  export default defineComponent({
    name: 'ViewPalletBoxInformation',
    components: { tabBox, tabPallet, tabProcessGroup },
    data() {
      return {
        activeKey: ['Box'],
        id: ''
      }
    },
    computed: {
      currentComponent() {
        return `tab${this.activeKey[0]}`
      }
    },
    created() {
    },
    methods: {
      // tab页签之间互相切换跳转
      handleChange({ key, params }) {
        this.activeKey = [key]
        this.id = params.id
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
